import React, { PureComponent } from 'react';
// import { Col, Row } from 'antd';
import styles from './index.less';
import { Spin } from 'antd';
import map from 'lodash/map';
import isArray from 'lodash/isArray';
import isObject from 'lodash/isObject';
import isEmpty from 'lodash/isEmpty';

class SheetTable extends PureComponent {
  render() {
    const { compData, loading, style } = this.props;
    const sheetsData = compData || {};
    const sheet0 = isArray(sheetsData.sheets) && isObject(sheetsData.sheets[0]) ? sheetsData.sheets[0] : {};
    const rows = sheet0.rows || [];

    return (
      <div className={styles.stWrap} style={style ? style : {}}>
        <Spin spinning={loading} className={styles.spin}>
          <table className={styles.table}>
            <tbody>
            {
              rows.length > 0 ?
                map(rows, (row, rK) => {
                  // if (isEmpty(row.cells)) return null;

                  return (
                    <tr key={`${sheet0.name}-${rK}`}
                        className={styles.row}
                        style={{ height: isEmpty(row.cells) ? 0 : row.height * 2 }}>
                      {
                        map(row.cells, (cell, cK) => {
                          // colSpan
                          const colSpan = (cell.columnTo - cell.columnFrom + 1) || 1;

                          // rowSpan
                          const rowSpan = (cell.rowTo - cell.rowFrom + 1) || 1;

                          // 单元格样式
                          const cellStyle = cell.cellStyle || {};
                          const cellStyleO = {};
                          if (cellStyle.fontHeight) cellStyleO.fontSize = cellStyle.fontHeight < 12 ? 12 : cellStyleO.fontHeight;
                          if (cellStyle.fontBold || cell.headed) cellStyleO.fontWeight = 'bold';
                          if (cellStyle.fontColor) cellStyleO.color = '#' + `${cellStyle.fontColor}`.substr(2);
                          // if (cellStyle.backgroundColor) cellStyleO.backgroundColor = '#' + `${cellStyle.backgroundColor}`.substr(2);

                          // paddingLeft
                          const leftSpaceLen = `${cell.text}`.length - (`${cell.text}`.replace(/(^\s*)/, '').length),
                            paddingLeft = leftSpaceLen ? leftSpaceLen * 5 : 0;
                          const divStyle = 300 < paddingLeft ? {
                            textAlign: 'center',
                            fontWeight: 'bold',
                          } : { paddingLeft };
                          rK === 0 && (divStyle.fontSize = 18);

                          return (
                            <td key={`${rK}-${cK}`}
                                className={styles.col}
                                rowSpan={rowSpan}
                                colSpan={colSpan}
                                style={{ width: cell.columnWidth, ...cellStyleO }}>
                              <div style={divStyle}>
                                {cell.text}
                              </div>
                            </td>
                          );
                        })
                      }
                    </tr>
                  );
                })
                : null
            }
            </tbody>
          </table>
        </Spin>
      </div>
    );
  }
}

SheetTable.defaultProps = {
  compData: {},
  loading: false,
};

export default SheetTable;
